<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.box{
	height: 150px;
	background-color:rgba(0,0,0,.3);
}
.box img{
	margin-right: 10px;
}
body{
   background-image: url(../image/5.jpg);
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
}

	</style>
</head>
<body id="bd">
	<div class="box" id="box">
		<img src="../image/1-small.jpg" alt="">
		<img src="../image/2-small.jpg" alt="">
	</div>
</body>
<script>

var box = document.getElementById("box");
var body = document.getElementById("bd");
var imgArr = box.children;

	for(var i=0;i<imgArr.length;i++){
			imgArr[i].onclick = function(){

				body.style.backgroundImage = "url("+this.src+")";
			}

	}


</script>
</html>